<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="/static/js/base.js"></script>
    <title>人物</title>
    <link rel="stylesheet" href="/static/plugs/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/normalize.css">
    <script src="/static/plugs/jquery/jquery-3.1.1.min.js"></script>
    <script src="/static/plugs/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="/static/js/base.js"></script>
    <script src="/static/js/helper.js"></script>
    <script>
        $(window).on('scroll', function(){
            let scrollTop = $(this).scrollTop(); // 获取垂直滚动条位置
            scrollTop = scrollTop > 300 ? 300 : scrollTop;
            let realOpacity = 1 - (scrollTop/300)*0.5;
            $(".index-bg").css(`opacity`, realOpacity);

            //$(".scroll").scrollTop(scrollTop);
        });
    </script>
    <style>
        /*总体布局*/
        body{
        }
        .index-bg{
            width: 100%;
            height:100%;
            background: url("/static/images/index-bg.jpg") fixed no-repeat;
            background-size:cover;
            position: fixed;
            opacity: 1;
            z-index: -1;
        }
        .wrap{
            width: 1440px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /*border:1px red solid;*/
        }

        /*top-tip布局*/
        .header{
            width: 1440px;
            height: 60px;
            background: rgba(255,255,255, 0.0);
            display: flex;
            justify-content: space-between;
            align-items: center;
            .weather-wrap{
                display: flex;
                .weather-icon{
                    margin:0 10px 0 20px;
                    width: 24px;
                    height: 24px;
                    background: url("/static/images/cloudy2.png") 100% 100%;
                    background-size: contain;
                }
            }
            .login-wrap{
                display: flex;
                .msg-icon{
                    width: 24px;
                    height: 24px;
                    background: url("/static/images/bell2.png") 100% 100%;
                    background-size: contain;
                }
                .msg{
                    margin:0 20px 0 10px;
                }
                .login-register{
                    margin-top: -10px;
                    border-radius: 15px;
                    padding: 5px 20px;
                    background: white;
                    font-size: 20px;
                    margin-right: 10px;
                    .slash1{
                        margin: 0 5px;
                    }
                }
                .userinfo{
                    position: relative;
                    display: none;
                    flex-direction: row;
                    align-items: center;
                    margin-right: 10px;
                    .userinfo-op{
                        width: 100px;
                        display: none;
                        flex-direction: column;
                        right: 0;
                        padding: 10px 20px;
                        font-size: 14px;
                        background: rgba(255, 255, 255,1);
                        border-radius: 5px;
                        position: absolute;
                        border:1px solid #cecece;
                        top:30px;
                        left:20px;
                    }
                }
                .userinfo img{
                    width:24px;
                    height: 24px;
                    margin-right: 10px;
                    border-radius: 50%;
                }
                .userinfo div{
                    margin-bottom: 10px;
                }
            }
        }

        /*问题tip布局*/
        .question-wrap{
            margin-top: 80px;
            width: 1440px;
            height: 50px;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            font-size: 18px;
            /*border: 1px red solid;*/
            .question{
                display: flex;
                align-items: center;
                .question-icon{
                    width: 32px;
                    height:32px;
                    opacity: 0.8;
                    background: url("/static/images/eye.png") 100% 100%;
                    background-size: contain;
                }
                .question-title{
                    line-height: 50px;
                    margin-left: 10px;
                }
                .question-next-icon{
                    width: 50px;
                    height:32px;
                    padding: 4px;
                    /*border: 1px red solid;*/
                    opacity: 0.8;
                    background: url("/static/images/arrow-next.png") no-repeat left 100% ;
                    background-size: contain;
                }
            }
        }

        /*搜索框布局*/
        .search-wrap{
            width: 600px;
            height: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 300px;
            /*border:1px red solid;*/
            .search-title-wrap{
                display: flex;
                justify-content: center;
                align-items: center;
                .search-title-icon{
                    width: 48px;
                    height: 48px;
                    background: url("/static/images/logo.png") 100% 100%;
                    background-size: contain;
                    margin-right: 20px;
                }
                .search-title{
                    color:darkmagenta;
                    font-size: 24px;
                    font-weight: bold;
                }
            }
            .search-input-wrap{
                position: relative;
                width: 600px;
                margin-top: 20px;
                .search-input{
                    width: 600px;
                    height: 50px;
                    padding-left: 30px;
                    border-radius: 25px;
                    border: 0.1pt solid rgba(200, 200, 200, 0.5);
                }
                .search-icon{
                    position: absolute;
                    z-index: 5;
                    opacity: 0.5;
                    top:10px;
                    left:550px;
                    width: 32px;
                    height: 32px;
                    background: url("/static/images/magnifier.png") 100% 100%;
                    background-size: contain;
                }
            }
        }

        /*导航条布局*/
        .nav{
            width: 1440px;
            margin-top: 20px;
            height: 60px;
            font-size: 24px;
            border-radius: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: #333333;
        }
        .nav div a{
            color:#FFFFFF;
        }

        /*新闻滑动框布局*/
        .contain{
            margin:50px 0 50px 50px;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 100px;
            .load-more{
                position: absolute;
                top:1420px;
                font-size: 26px;
                opacity: 0.5;
            }
        }
        .scroll{
            height: 650px;
            display:flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;
            overflow: scroll;
            overflow-x: hidden;
            overflow-y：scorll;
        }
        .scroll::-webkit-scrollbar {
            display: none;
        }

        .data{
            width: 340px;
            height: 340px;
            margin-right: 10px;
            margin-bottom: 10px;
            background: grey;
        }

        .data-2x{
            width: 690px;
            height: 340px;
            margin-right: 10px;
            margin-bottom: 10px;
            position: relative;
        }
        .data-2x img{
            width: 690px;
            height: 340px;
            position: absolute;
            z-index: -1;
            object-fit: cover;
        }
        .data-2x-wrap {
            width: 500px;
            height: 340px;
            position: absolute;
            background: linear-gradient(to right, rgba(255, 255, 255,1), rgba(255, 255, 255,0));
            display: flex;
            flex-direction: column;
            padding: 20px 50px 10px 20px;
            .data2x-user-box{
                width: 340px;
                height: 60px;
                /*border: 1px red solid;*/
                display: flex;
                flex-direction: row;
                align-items: center;
                .data2x-user-icon{
                    width: 48px;
                    height: 48px;
                    margin-right: 20px;
                }
                .data2x-user-icon img{
                    width: 48px;
                    height: 48px;
                    z-index: 5;
                    border-radius: 50%;
                }
            }
            .data2x-title{
                width: 340px;
                height: 80px;
                line-height: 40px;
                font-size: 18px;
                /*border: 1px yellow solid;*/
            }
            .data2x-des{
                width: 340px;
                height: 200px;
                font-size: 16px;
                /*border: 1px solid purple;*/
            }
            .data2x-op-box{
                width: 400px;
                height: 50px;
                display: flex;
                flex-direction: row;
                align-items: center;
                /*background: #FFFFFF;*/
                .icon-up{
                    width: 24px;
                    height: 24px;
                    background: url("/static/images/up.png") 100% 100%;
                    background-size: contain;
                    margin-right: 5px;
                }
                .icon-up-num{
                    margin-right: 10px;
                }
                .icon-comment{
                    width: 24px;
                    height: 24px;
                    background: url("/static/images/comment.png") 100% 100%;
                    background-size: contain;
                    margin-right: 5px;
                }
                .icon-comment-num{
                    margin-right: 10px;
                }
                .icon-store{
                    width: 24px;
                    height: 24px;
                    background: url("/static/images/store.png") 100% 100%;
                    background-size: contain;
                    margin-right: 5px;
                }
                .icon-store-num{
                    margin-right: 10px;
                }
            }
        }

        .data-1x{
            width: 340px;
            height: 340px;
            margin-right: 10px;
            margin-bottom: 10px;
            position: relative;
            background: none;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
        }
        .data-1x img{
            width: 340px;
            height: 340px;
            position: absolute;
            z-index: -1;
            object-fit: cover;
        }
        .data-1x-wrap {
            /*border: 1px red solid;*/
            width: 340px;
            height: 170px;
            /*margin-top: 170px;*/
            /*position: absolute;*/
            background: linear-gradient(to top, rgba(255, 255, 255,1), rgba(255, 255, 255,0));
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 0 20px 20px 20px;
            .data1x-user-box{
                width: 300px;
                height: 60px;
                display: flex;
                flex-direction: row;
                align-items: center;
                .data1x-user-icon{
                    width: 48px;
                    height: 48px;
                    margin-right: 20px;
                }
                .data1x-user-icon img{
                    width: 48px;
                    height: 48px;
                    z-index: 5;
                    border-radius: 50%;
                }
            }
            .data1x-title{
                width: 300px;
                height: 80px;
                line-height: 40px;
                font-size: 18px;
                /*border: 1px yellow solid;*/
            }
            .data1x-op-box{
                width: 300px;
                height: 50px;
                display: flex;
                flex-direction: row;
                align-items: center;
                /*background: #FFFFFF;*/
                .icon-up{
                    width: 24px;
                    height: 24px;
                    background: url("static/images/up.png") 100% 100%;
                    background-size: contain;
                    margin-right: 5px;
                }
                .icon-up-num{
                    margin-right: 10px;
                }
                .icon-comment{
                    width: 24px;
                    height: 24px;
                    background: url("static/images/comment.png") 100% 100%;
                    background-size: contain;
                    margin-right: 5px;
                }
                .icon-comment-num{
                    margin-right: 10px;
                }
                .icon-store{
                    width: 32px;
                    height: 32px;
                    background: url("static/images/store.png") 100% 100%;
                    background-size: contain;
                    margin-right: 5px;
                }
                .icon-store-num{
                    margin-right: 10px;
                }
            }
        }

        /*footer布局*/
        .footer-wrap{
            display: flex;
            justify-content: center;
            background: #cccccc;
        }
        .footer{
            width: 1440px;
            height: 60px;

            display: flex;
            justify-content: space-between;
            align-items: center;
            .outer-link{
                display: flex;
                justify-content: space-around;
            }
        }
        .outer-link div a{
            margin-right: 20px;
        }
    </style>
</head>
<body>
<div class="index-bg"></div>
<div class="wrap">
    <div class="header">
        <div class="weather-wrap">
            <div class="city">重庆</div>
            <div class="weather-icon"></div>
            <div class="weather">多云 23℃</div>
        </div>
        <div class="login-wrap">
            <div class="msg-icon"></div>
            <div class="msg">消息</div>
            <div class="login-register">
                <a class="login" href="login.php">登录</a>
                <span class="slash1">|</span>
                <a class="register" href="register-type.php">注册</a>
            </div>
            <div class="userinfo">
                    <img class="user-thumb" src="" alt="用户头像">
                    <span class="user-nickname"></span>
                    <div class="userinfo-op">
                        <div><a href="/user-center/index.php">个人中心</a></div>
                        <div><a href="/user-center/user-detail.php">个人主页</a></div>
                        <div><a href="javascript:volid(0)" onclick="logout()">退出</a></div>
                    </div>
            </div>
        </div>
    </div>
    <div class="search-wrap">
        <div class="search-title-wrap">
            <div class="search-title-icon"></div>
            <div class="search-title"><a href="index.php">haishuyun</a></div>
        </div>
        <div class="search-input-wrap">
            <input class="search-input" placeholder="请输入查询内容...">
            <div class="search-icon" onclick="toSearch()"></div>
        </div>
    </div>
    <div class="question-wrap">
        <div class="question">
            <div class="question-icon"></div>
            <div class="question-title">你知道阿尔萨斯之眼吗？</div>
            <div class="question-next-icon"></div>
        </div>
    </div>
    <div class="nav">
        <div><a href="">关注</a></div>
        <div><a href="">头条</a></div>
        <div><a href="/learning.php">知识</a></div>
        <div><a href="">政策法规</a></div>
        <div class="nav-product"><a href="/product.php">产品服务</a></div>
        <div><a href="/employ/index.php">招聘</a></div>
        <div><a href="/figure/index.php">人物</a></div>
        <div><a href="">分享</a></div>
        <div><a href="/company/index.php">企业</a></div>
    </div>

    <div class="contain">
        <div class="scroll">
            <div class="data-2x">
                <img src="" alt="">
                <div class="data-2x-wrap">
                    <div class="data2x-user-box">
                        <div class="data2x-user-icon">
                            <img src="/static/images/thumb.png" alt="">
                        </div>
                        <div class="data2x-user-name"><a href="javascript:volid(0)" onclick="toUser()">海数云</a></div>
                    </div>
                    <div class="data2x-title">在职场中，领导者应该了解的知识</div>
                    <div class="data2x-des">随着时代的发展，领导所扮演的角色也在不停也演进。过去领导所扮演的角色就是发号者，警察， 裁判。</div>
                    <div class="data2x-op-box">
                        <div class="icon-up"></div>
                        <div class="icon-up-num">200</div>
                        <div class="icon-comment"></div>
                        <div class="icon-comment-num">200</div>
                        <div class="icon-store"></div>
                        <div class="icon-store-num">200</div>
                    </div>
                </div>
            </div>
            <div class="data data-1x">
                <img src="" alt="">
                <div class="data-1x-wrap">
                    <div class="data1x-user-box">
                        <div class="data1x-user-icon">
                            <img src="/static/images/thumb.png" alt="">
                        </div>
                        <div class="data1x-user-name">时事早知道</div>
                    </div>
                    <div class="data1x-title">马家厨房要做预制菜？马云前助理回应</div>
                    <div class="data1x-op-box">
                        <div class="icon-up"></div>
                        <div class="icon-up-num">200</div>
                        <div class="icon-comment"></div>
                        <div class="icon-comment-num">200</div>
                        <div class="icon-store"></div>
                        <div class="icon-store-num">200</div>
                    </div>
                </div>
            </div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
        </div>
        <div class="load-more">加载更多...</div>
    </div>



</div>
<div class="footer-wrap">
    <div class="footer">
        <div class="copyright">Copyright © 2023 海数云 版权所有 渝ICP备2022012388号</div>
        <div class="outer-link">
            <div><a href="">用户协议</a></div>
            <div><a href="">隐私政策</a></div>
            <div><a href="">媒体合作</a></div>
            <div><a href="">广告合作</a></div>
            <div><a href="">友情链接</a></div>
            <div><a href="">反馈建议</a></div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
        //获取本地用户信息
        let userinfo = getLocalUserinfo();
        if ( userinfo ){
            //不为空，显示用户信息
            console.log(userinfo);
            $(".login-register").css('display', 'none');
            $(".userinfo").css('display', 'flex');
            $(".userinfo img").attr('src', '/static/images/thumb.png');
            $(".userinfo span").html(userinfo.value.nickname);
        } else {
            //显示登录信息
            console.log('not login');
            $(".login-register").css('display', 'flex');
        }
        //获取默认数据列表
        getIndexList();

        $(".data-2x > img").attr('src', '/static/images/data-2x.png');
        $(".data-2x").mouseenter(function(){
            $(this).children(".data-2x-wrap").css('width', '690px');
        }).mouseleave(function(){
            $(this).children(".data-2x-wrap").css('width', '500px');
        })

        $(".data-1x > img").attr('src', '/static/images/data-1x.jpg');
        $(".data-1x").mouseenter(function(){
            $(this).children(".data-1x-wrap").css('height', '340px');
        }).mouseleave(function(){
            $(this).children(".data-1x-wrap").css('height', '170px');
        })

        $(".userinfo").mouseenter(function(){
            console.log('enter');
            $(".userinfo-op").css('display', 'flex');
        });
        $(".userinfo-op").mouseleave(function(){
            console.log('leave');
            $(".userinfo-op").css('display','none');
        })
    });

    //从storage获取用户信息
    function getLocalUserinfo(){
        let user = localStorage.getItem("userinfo");
        if ( !user === true){
            return false;
        }
        let storageTime = JSON.parse(user).time;
        let differTime = new Date().getTime() - storageTime;
        if ( differTime >= 2500000000){ //一个月左右，毫秒时间戳
            return false;
        } else {
            return JSON.parse(user);
        }
    }

    function logout(){
        window.localStorage.setItem("userinfo", "");
        window.location.reload();
    }

    function getIndexList(){
        $.ajax({
            type:'post',
            url:`${baseUrl}/api/article/index`,
            contentType:'application/json',
            data:{
                "type":'post',
            },
            success:function(res){
                console.log(res);
                // if ( res.message === "Success" ){
                //     let token =  res.data.token;
                //     let curtime = new Date().getTime();
                //     window.localStorage.setItem("tokenObj", JSON.stringify({token:token,time:curtime}));
                //     let tokenObj = localStorage.getItem("tokenObj");
                //     console.log(tokenObj);
                //     //window.localStorage.setItem('token', res.data.token);
                //     location.href = "index.php";
                // }
            },
            error:function(res){
                alert('fail');
            }
        });
    }

    function toSearch(){
        let keywords = $(".search-input").val();
        window.location.href = `search-result.php?keywords=${keywords}`;
    }

    function toUser(){
        let userId = 1;
        window.location.href = `user-center/user-detail.php?userId=${userId}`;
    }
</script>
</body>
<script>

</script>
</html>